<template>
	<div class="ratings"  v-el:ratings>
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<div class="score">{{seller.score}}</div>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="stitle">服务态度</span>
						<star :size='36' :score="seller.serviceScore"></star>
						<span class="sscore">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="stitle">
							<span class="stitle">商品评分</span>
							<star :size='36' :score="seller.foodScore"></star>
							<span class="sscore">{{seller.foodScore}}</span>
						</span>
					</div>
					<div class="deliveryTime">
						<span class="ctitle">送达时间</span>
						<span class="ctime">{{seller.deliveryTime}}</span>
					</div>					
				</div>				
			</div>
			<split></split>
			<ratingselect
			:select-type = "selectType"	
			:only-content = "onlyContent"	
			:desc = "desc"	
			:ratings= "ratings"
			></ratingselect>
			<div class="rating-wrapper">
				<ul>
					<li 
					v-for="rating in ratings" 
					v-show="needShow(rating.rateType,rating.text)"
					class="rating-item">
						<div class="avatar">
							<img width="28" height="28" :src="rating.avatar" />
						</div>
						<div class="content">
							<h1 class="name">
								{{rating.username}}
							</h1>
							<div class="star-wrapper">
								<star :size = '24' :score = "rating.score"></star>
								<div class="userDelivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</div>
							</div>
							<p class="userText">{{rating.text}}</p>
							<div 
							class="recommend"
							v-show="rating.recommend && rating.recommend.length"
							>
							<span class="iconfont iconzan">&#xe614;</span>
							<span class="itemText" v-for="text in rating.recommend">{{text}}</span>
							</div>
							<div class="time">
								{{rating.rateTime | formatDate}}
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import star from 'components/star/star'
	import split from '../../common/split/split.vue'
	import ratingselect from 'components/ratingselect/ratingselect'
	import {formatDate} from '../../common/date/date'
	var POSITIVE = 0
	var NEGATIVE = 1;
	var ALL = 2;
	export default{
		props:{
			seller:{
				type:Object
			}
		},
		data:function(){
			return{
			    ratings:[],
				selectType:ALL,
				onlyContent:true,
				desc:{
					all:"全部",
					positive:"推荐",
					negative:"吐槽"
				}
			}
		},
		components:{
			star,
			split,
			ratingselect
		},
		filters:{
			formatDate:function(time){
				var date = new Date(time)
				return formatDate(date,'yyyy-MM-dd hh:mm')
			}
		},
		events:{
			"ratingtype.select":function(type){
				this.selectType = type
				this.$nextTick(function(){
					if(this.scroll){
						this.scroll.refresh()
					}
				})				
			},
			"content.toggle":function(onlyContent){
				this.onlyContent = onlyContent
				this.$nextTick(function(){
					if(this.scroll){
						this.scroll.refresh()
					}
				})
			}
		},
		methods:{
			needShow:function(rateType,text){
				if(this.onlyContent && !text){
					return false
				}
				if(this.selectType == ALL){
					return true
				}else
					return rateType == this.selectType		
				}
		},
		created:function(){
			//console.log(this.selectFoods)
			this.$http.get('/api/ratings')
			.then(function(data){
				//console.log(data.body)
				var res  = data.body
				if(res.errno == 0 && res.data){					 
					this.ratings = res.data;
					this.$nextTick(function(){
						if(!this.scroll){
							//console.log(111)
							this.scroll  = new Bscroll(this.$els.ratings,{
								click:true
							})
						}else{
							this.scroll.refresh()
						}
					})
				}
			})
			//
				
		}
	}
</script>

<style lang="stylus" scoped="">
	@import "../../common/stylus/index.styl"
	.ratings {
		position: absolute;
		top: 174px;
		bottom: 0px;
		width: 100%;
		left: 0;
		overflow: hidden;
	}
	.overview {
		display: flex;
		padding: 18px 0px;
	}
	.overview-left {
		flex: 0 0 137px;
		padding: 6px 0;
		width: 137px;
		border-right: 1px solid rgba(7,17,27,0.1);
		text-align: center;
	}
	.score {
		margin-bottom: 6px;
		line-height: 28px;
		font-size: 24px;
		color:rgb(255,153,0)
	}
	.title {
		margin-bottom: 8px;
		line-height: 12px;
		font-size: 12px;
		color:rgb(7,17,27)
	}
	.rank {
		padding-bottom: 6px;
		line-height: 10px;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.overview-right{
		flex: 1;
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left: 24px;
	}
	.score-wrapper {
		margin-bottom: 8px;
		line-height: 18px;
		font-size: 0;
	}
	.stitle {
		display: inline-block;
		vertical-align: top;
		line-height: 18px;
		font-size: 12px;
		color: rgb(7,17,27);
	}
	.star {
		display: inline-block;
		margin: 0 12px;
		vertical-align: top;		
	}
	.sscore {
		display: inline-block;
		vertical-align: top;
		line-height: 18px;
		font-size: 12px;
		color: rgb(255,153,0);
	}
	.deliveryTime {
		font-size: 0;
	}
	.ctitle {
		line-height: 18px;
		font-size: 12px;
		color: rgb(7,17,27);
	}
	.ctime {
		margin-left: 12px;
		font-size: 12px;
		color:rgb(147,153,159) ;
	}
	.rating-wrapper {
		padding: 0px 18px;
	}
	.rating-item {
		display: flex;
		padding: 18px 0px;
		border-1px(rgba(7,17,27,0.1))
	}
	.avatar {
		flex: 0 0 28px;
		width: 28px;
		margin-right: 12px;
		border-radius: 50%;
	}
	.content {
		position: relative;
		flex: 1;
	}
	.name {
		margin-bottom: 4px;
		line-height: 12px;
		font-size: 10px;
		color: rgb(7,17,27);
	}
	.star-wrapper {
		margin-bottom: 6px;
		font-size: 0;
	}
	.star-wrapper .star {
		display: inline-block;
		vertical-align: top;
		margin-right: 6px;
	}
	.userDelivery {
		display: inline-block;
		vertical-align: top;
		line-height: 12px;
		color: rgb(147,153,159);
		font-size: 10px;
	}
	.userText {
		margin-bottom: 8px;
		line-height: 18px;
		color: rgb(7,17,27);
		font-size: 12px;
	}
	.recommend {		
		line-height: 16px;
		font-size: 0px;
	}
	.iconzan,.itemText {
		display: inline-block;
		margin: 0 8px 4px 0;
		font-size: 9px;
	}
	.iconzan {
		color: rgb(0,160,220);
	}
	.itemText {
		padding: 0px 6px;
		border: 1px solid rgba(7,17,27,0.1);
		border-radius: 1px;
		color: rgb(147,153,159);
		background: #fff;
	}
	.time {
		position: absolute;
		top: 0;
		right: 0;
		line-height: 12px;
		font-size: 10px;
		color: rgb(147,153,159);
	}
</style>
